<template>
  <view class="home_container" id="page">
    <view class="top_cont" :class="mallId==='0'?'bg_0':mallId==='100'?'bg_100':'bg_200'"
      :style="'height:calc(' + topBarHeight + 'px + 270rpx)'">
      <div class="top_cont_log" :style="top_cont">
        <image :src="staticUrl()+'/new/logo.png'" class="logo"></image>
        <view class="_icon">
          <image :src="staticUrl()+'/new/qt.png'" class="qt" @click="clickQt"></image>
          <image :src="staticUrl()+'/new/cs.png'" class="cs" @click="clickIm"></image>
        </view>
      </div>
      <view class="search">
        <image :src="staticUrl()+'/new/search.png'" class="icon_search"></image>
        <input class="search_input" type="text" :placeholder="hotWords"
          @click="clickSearch(result)" />
        <image :src="staticUrl()+'/new/scanCode.png'" class="icon_scanCode" @click="clickScan">
        </image>
      </view>
      <view class="page_list">
        <view v-for="(e,m) in page_list" :key="m" class="page_item" @click="clickMallId(e)">
          <img :src="e.img" alt="">
          <text>{{e.name}}</text>
          <img src="https://www.xdyy100.com/wholesale/files/mp/static/new/active.png" alt=""
            v-if="mallId === e.mallId" class="active">
        </view>
      </view>
      <view class="page_floor_top"></view>
    </view>
    <view class="home_top_bg" :class="mallId==='0'?'bg_0':mallId==='100'?'bg_100':'bg_200'">
      <view :style="'height:calc(' + topBarHeight + 'px + 270rpx)'"></view>
      <view class="home_banner" v-if="bannerList.length">
        <swiper autoplay :interval="3000" circular>
          <swiper-item v-for="(item, index) in bannerList" :key="index">
            <ImageCache :src="item.image" @click="activityJump(item)" class="img"></ImageCache>
          </swiper-item>
        </swiper>
      </view>
      <!-- 动态楼层 -->
      <view class="home_floor" v-if="floorData.length">
        <Floors v-for="(item, index) in floorData" :key="index" :floor="item" :index="index">
        </Floors>
      </view>
      <!-- 推荐  -->
      <view class="home_recommend" id="recommend" v-if="tabsRecommend.length">
        <!-- :style="'top:calc(' + topBarHeight + 'px + 270rpx)'" -->
        <view class="home_recommend_title">
          <scroll-view scroll-x="true" class="scroll-view_H">
            <view v-for="(item, index) in tabsRecommend" :key="index" @click="clickRecommend(item)"
              :class="recommendTitleStyle === item.name ? 'recommend_style' : ''"
              class="recommend_default">
              <view>
                <text class="name">{{ item.name }}</text>
                <text class="after" v-if="recommendTitleStyle === item.name"></text>
              </view>
            </view>
          </scroll-view>
        </view>
        <scroll-view scroll-y="true" @scrolltolower="getData">
          <!-- :style="'height:calc(100vh - ' + topBarHeight + 'px)'" -->
          <view class="home_recommend_list" v-if="!recommend[0].length && !recommend[1].length">
            <view class="notAvailable">
              <image :src="staticUrl()+'/new/notAvailable.png'"></image>
              <view>暂无商品</view>
            </view>
          </view>
          <!-- :style="'height:calc(100vh - ' + topBarHeight + 'px - 270rpx)'" -->
          <view class="home_recommend_list" v-else>
            <view v-for="(item,index) in recommend" :key="index">
              <view v-for="(i,j) in item" :key="j">
                <view class="recommend_item" @click="clickJumpInfo(i)">
                  <view class="imgs">
                    <image v-if="i.inform" :src="i.inform" class="original inform_announcement">
                    </image>
                    <ImageCache class="original" :class="i.quantity ? '' : 'sellOut_container-img'"
                      :src="i.original ? i.original : staticUrl() + '/home/defaultImg.png'" />
                    <estimated :estimated="i.estimated"></estimated>
                  </view>
                  <view class="goods_info">
                    <view class="goods_name ">
                      <span class="ephedrine" v-if="i.ephedrine">含麻</span>
                      <span class="goodsName singleRowEllipsis"> {{ i.goodsName }}</span>
                    </view>
                    <view class="simpleSpecs singleRowEllipsis">规格：{{ i.simpleSpecs }}</view>
                    <view class="activityType singleRowEllipsis">
                      <text v-for="(n, m) in i.promotionMethods" :key="m"
                        :class="n.promotionType === 'COUPON' ? 'voucher' : 'seckillType'">
                        {{ n.promotionType === 'COUPON' ? '券' : n.name }}
                      </text>
                      <text class="purchase" v-if="i.promotionLimitNum">限购</text>
                    </view>
                    <view class="promotionPrice" v-if="hasToken() && i.price">
                      <text class="coinSymbol">￥</text>
                      <text class="price">{{ i.price }}</text>
                      <text class="packing">/{{ i.goodsUnit }}</text>
                    </view>
                    <view class="originalPrice">
                      <text class="price" v-if="i.originalPrice">￥{{ i.originalPrice }}</text>
                    </view>
                    <view class="promotionPrice" v-if="hasToken() && !i.price">
                      <text>资质审核可见</text>
                    </view>
                    <view class="promotionPrice" v-if="!hasToken()">
                      <text>登录可见</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- 广告 -->
    <view class="advertisement" v-if="advertisementStatus" @click="advertisementStatus = false">
      <view>
        <image :src="advertisement[advertisementIndex].imageUrl"
          @click="activityJump(advertisement[advertisementIndex])" mode="aspectFit">
        </image>
        <icon type="clear" size="52rpx" color="#fff" class="icon"
          @click="advertisementStatus = false">
        </icon>
      </view>
    </view>
    <QualificationsStatus v-if="verifyTokenStatus"></QualificationsStatus>
    <Versiontips v-if="versiontipShow" :show="versiontipShow" :versionNum="versionNum"
      :downloadUrl="downloadUrl" :versionContent="versionContent">
    </Versiontips>
    <PermissionPopup v-if="isPermission" :visible="isPermission" :messageTxt="permissionTxt"
      @updateVisible="isPermission = $event" @scanCoding="scanCoding">
    </PermissionPopup>
    <Dialog :statusContent="invitationCodeContent" v-if="invitationCodeDialog"
      @shutDown="invitationCodeDialog = false">
    </Dialog>
  </view>
</template>

<script>
import {
  getBanner,
  getFloor,
  getBottomActivity,
  getBottomActivityData,
  advertisementList,
  hotWords,
  customerService,
  automaticUpdate,
  unknownRequest
} from '@/api/home/index'
import Floors from '@/components/home/floor.vue'
import Versiontips from '@/components/home/versiontips.vue'
import PermissionPopup from '@/components/permission/index.vue'
import { bindInviter } from '@/api/personalCenter/index.js'
import Dialog from '@/components/home/dialog.vue'
import { pageSkipping } from '@/utils/util'

import estimated from "@/components/estimated/index.vue"


export default {
  components: { Floors, Versiontips, PermissionPopup, Dialog, estimated },
  data () {
    return {
      verifyTokenStatus: false,
      isPermission: false, //是否显示权限弹框
      permissionTxt: '', //权限提示内容
      downloadUrl: '',
      versiontipShow: false,
      versionNum: '',
      versionContent: [],
      topBarHeight: 0, //状态栏加导航栏高度
      stateBarHeight: 0, //导航栏高度
      tabBarHeight: 50, //状态栏高度
      top_cont: '',
      bannerList: [], // banner图 数组
      floorData: [],
      quickNavigation: [],
      seckills: '',
      seckill_gradient: '',
      seckillMoreLink: '',
      seckillsPromotionType: '',
      bargains: '',
      bargain_gradient: '',
      bargainMoreLink: '',
      bargainsPromotionType: '',
      activities: [],
      recommend: [[], []],
      tabsRecommend: [],
      recommendTitleStyle: '',
      COUPON_bannerPath: '',
      activityList: [],
      recommendPath: '',
      recommendForm: {
        pageNumber: 1,
        pageSize: 30,
        structuredRule: true,
      },
      loading: false,
      scanType: '',
      result: '',
      advertisement: [],
      advertisementIndex: uni.getStorageSync('advertisementIndex'),
      advertisementStatus: false,
      recommendPages: 0,
      pages: 0,
      slideStatus: false,
      hotWordsList: [],
      hotWords: '',
      hotWordsIndex: 1,
      timeId: '',
      promotionBrandPath: '',
      permissionType: '',
      invitationCodeDialog: false,
      invitationCodeContent: '',
      mallId: "0",
      page_list: [
        { mallId: "0", img: 'https://www.xdyy100.com/wholesale/files/mp/static/new/0.png', name: '首页' },
        { mallId: "100", img: 'https://www.xdyy100.com/wholesale/files/mp/static/new/100.png', name: '中药商城' },
        { mallId: "200", img: 'https://www.xdyy100.com/wholesale/files/mp/static/new/200.png', name: '西药商城' },
        { mallId: "", img: 'https://www.xdyy100.com/wholesale/files/mp/static/new/coupon.png', name: '领券中心' }
      ]
    }
  },
  onPullDownRefresh () {
    this.seckills = ''
    this.bargains = ''
    this.activityList = []
    this.floorData = []
    this.carouselChart()
    this.advertisementIndex = uni.getStorageSync('advertisementIndex')
  },
  methods: {
    clickMallId (e) {
      if (!this.hasToken()) {
        uni.showToast({ icon: 'none', title: '请登录' })
        return
      }
      if (!e.mallId) {
        uni.navigateTo({ url: '/subpackage/personalCenter/coupon' })
        return
      }
      if (e.mallId === this.mallId) {
        return
      }
      this.mallId = e.mallId
      uni.setStorageSync('mallId', this.mallId)
      this.seckills = ''
      this.bargains = ''
      this.activityList = []
      this.bannerList = []
      this.floorData = []
      this.tabsRecommend = []
      this.recommend = [[], []]
      this.carouselChart()
      this.advertisementIndex = uni.getStorageSync('advertisementIndex')
    },
    clickQt () {
      if (this.hasToken()) { uni.navigateTo({ url: '/pages_user/integral/index' }) }
      else { uni.showToast({ icon: 'none', title: '请登录' }) }
    },
    setBindInviter (e) {
      bindInviter(e).then(res => {
        if (res.code === 200) {
          this.invitationCodeContent = res.data
        } else {
          this.invitationCodeContent = res.msg
        }
        this.invitationCodeDialog = true
      })
    },
    //计算顶栏高度
    calculateHeight () {
      var self = this
      uni.getSystemInfo({
        success: function (res) {
          self.stateBarHeight = res.statusBarHeight
          // #ifdef MP-WEIXIN
          let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
          let paddingSize = menuButtonInfo.top - self.stateBarHeight
          self.tabBarHeight = menuButtonInfo.bottom - self.stateBarHeight + paddingSize
          self.topBarHeight = menuButtonInfo.bottom + paddingSize
          // #endif
          // #ifndef MP
          self.topBarHeight = self.stateBarHeight + self.tabBarHeight
          // #endif
          // #ifdef MP-TOUTIAO
          self.topBarHeight = self.tabBarHeight
          self.stateBarHeight = 0
          // #endif
          self.top_cont = `height:${self.tabBarHeight}px;padding-top:${self.stateBarHeight}px;`
        }
      })
    },
    // 更新
    versionUpdate () {
      //获取版本信息
      automaticUpdate().then(res => {
        uni.setStorage({
          key: 'versionInfo',
          data: res.data,
          success: function () { }
        })
        if (res.code === 200) {
          //当前版本号
          let thisVersionNum = uni.getStorageSync('version')
          //服务器版本号
          this.versionNum = res.data.version
          this.versionContent = res.data.content.split('\n')
          // 判断当前版本号和后端返回的版本号是否一致, 有升级才更新
          if (this.compareVersion(this.versionNum, thisVersionNum) > 0) {
            this.versiontipShow = true
            this.downloadUrl = res.data.downloadUrl
          }
        }
      })
    },
    compareVersion (version1, version2) {
      if (version1 === '' || version2 === '') {
        throw new Error('版本号不能为空')
      }
      const arr1 = version1.split('.')
      const arr2 = version2.split('.')
      const length1 = arr1.length
      const length2 = arr2.length
      let minlength = Math.min(length1, length2)
      let i = 0
      for (i; i < minlength; i++) {
        let a = parseInt(arr1[i]) || 0
        let b = parseInt(arr2[i]) || 0
        let diff = a - b
        if (diff !== 0) {
          return diff > 0 ? 1 : -1
        }
      }
      if (length1 === length2) {
        return 0
      } else if (length1 > length2) {
        for (let j = i; j < length1; j++) {
          if (parseInt(arr1[j]) !== 0) {
            return 1
          }
        }
        return 0
      } else {
        for (let j = i; j < length2; j++) {
          if (parseInt(arr2[j]) !== 0) {
            return -1
          }
        }
        return 0
      }
    },
    qualificationsOverdue () {
      uni.navigateTo({
        url: '/subpackage/personalCenter/qualifications?active=2'
      })
    },
    // 首页搜索
    changeHotWords () {
      this.timeId = setTimeout(() => {
        this.hotWords = this.hotWordsList[this.hotWordsIndex]
        this.hotWordsIndex++
        if (this.hotWordsIndex >= this.hotWordsList.length) {
          this.hotWordsIndex = 0
        }
        this.changeHotWords()
      }, 3000)
    },
    // 扫码 扫码
    clickScan () {
      // #ifndef MP
      this.isPermission = true
      if (uni.getSystemInfoSync().osName === 'ios') {
        this.scanCoding()
      } else {
        this.permissionType === ''
        this.permissionTxt =
          '用于获取设备权限进行二维码、条形码扫描和图片识别，需要获取手机相机、相册（存储）权限'
      }
      // #endif
      // #ifdef MP
      this.scanCoding()
      // #endif
    },
    scanCoding () {
      if (this.permissionType === 'im') {
        customerService().then(res => {
          if (res.code === 200) {
            uni.navigateTo({
              url: `/pages/mySetting/webView-im?url=${res.data.h5}&title=${res.data.robotName}`
            })
          }
        })
      } else {
        uni.scanCode({
          onlyFromCamera: false,
          scanType: ['barCode', 'qrCode'],
          success: res => {
            // '码类型：'
            this.scanType = res.scanType
            // '码内容：'
            this.result = JSON.parse(res.result)
            if (typeof this.result != 'object') {
              uni.navigateTo({
                url: '/pages_search/index?keyword=' + this.result
              })
            } else {
              let url = encodeURIComponent(this.result.url)
              uni.navigateTo({
                url: `/pages/activity/index?url=${url}`
              })
            }
          },
          //扫码失败后
          fail: () => {
            uni.showToast({
              title: '扫码失败',
              icon: 'none'
            })
          }
        })
      }
    },
    // 跳转客服
    clickIm () {
      if (this.hasToken()) {
        // #ifdef MP-WEIXIN
        uni.navigateTo({
          url: '/subpackage/personalCenter/im'
        })
        // #endif

        // #ifndef MP-WEIXIN
        this.isPermission = true
        if (uni.getSystemInfoSync().osName === 'ios') return
        this.permissionType = 'im'
        this.permissionTxt = '客服聊天需要获取手机相机、相册（存储）权限'
        // #endif
      } else {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
      }
    },
    // 活动 跳转
    activityJump (val) {
      if (val.promotionType === 'NEWCOMER') {
        unknownRequest(val.path, 'get').then(res => {
          if (res.code === 200) {
            uni.showToast({ icon: 'none', title: res.data })
          }
        })
        return
      }
      pageSkipping(val.path, val.param)
    },
    // 获取首页数据
    carouselChart () {
      // 获取轮播图
      this.bannerList = []
      getBanner({ floorId: 0, mallId: this.mallId }).then(res => {
        if (res.code === 200) {
          this.bannerList = res.data
        }
      })
      // 获取楼层
      this.floorData = []
      getFloor({ mallId: this.mallId }).then(res => {
        if (res.code === 200) {
          this.floorData = res.data
        }
      })
      // 底部推荐
      this.tabsRecommend = []
      getBottomActivity({ mallId: this.mallId }).then(res => {
        if (res.code === 200 && res.data.length) {
          this.tabsRecommend = res.data
          this.recommendTitleStyle = res.data[0].name
          this.recommendPath = res.data[0].path
          this.getList()
        }
      })
      uni.stopPullDownRefresh()
      advertisementList({ mallId: this.mallId }).then(res => {
        if (res.code === 200) {
          this.advertisement = res.data
          uni.setStorageSync('advertisementLength', this.advertisement.length)
          if (this.advertisement.length) {
            if (
              uni.getStorageSync('advertisementIndex') >=
              uni.getStorageSync('advertisementLength') - 1
            ) {
              uni.setStorageSync('advertisementIndex', 0)
            } else {
              uni.setStorageSync('advertisementIndex', uni.getStorageSync('advertisementIndex') + 1)
            }
            this.advertisementStatus = true
          }
        }
      })
    },
    // 获取底部推荐 数据
    getList () {
      this.recommendForm.pageNumber = 1
      this.recommendForm.mallId = this.mallId
      this.recommend = [[], []]
      getBottomActivityData(this.recommendPath, this.recommendForm).then(res => {
        if (res.code === 200) {
          this.pages = res.data.pages
          if (res.data.records.length === 0) {
            return
          }
          res.data.records.forEach((item, index) => {
            if (index % 2 === 0) this.recommend[0].push(item)
            else this.recommend[1].push(item)
          })
        }
      })
    },
    // 底部推荐 分页
    getData () {
      if (this.pages > this.recommendForm.pageNumber) {
        this.recommendForm.pageNumber++
        getBottomActivityData(this.recommendPath, this.recommendForm).then(res => {
          if (res.code === 200) {
            if (res.data.records.length === 0) {
              if (this.recommendForm.pageNumber > 1) {
                this.loading = true
                setTimeout(() => {
                  this.loading = false
                }, 2000)
              }
            } else {
              res.data.records.forEach((item, index) => {
                if (index % 2 === 0) this.recommend[0].push(item)
                else this.recommend[1].push(item)
              })
            }
          }
        })
      } else {
        uni.showToast({ icon: 'none', title: '到底了', mask: true })
      }
    },
    // 点击搜索框
    clickSearch () {
      uni.navigateTo({
        url: `/pages_search/index?keyword=${this.result}&hotWords=${this.hotWords}`
      })
    },
    // 底部推荐 切换
    clickRecommend (item) {
      this.recommendTitleStyle = item.name
      this.recommendPath = item.path
      this.getList()
    },
    // 跳转 详情
    clickJumpInfo (val) {
      uni.navigateTo({
        url: '/pages/goodsInfo/index?id=' + val.id
      })
    },
  },
  onPageScroll () {
    let that = this
    uni
      .createSelectorQuery()
      .select('#recommend')
      .boundingClientRect(function (rect) {
        if (rect) {
          // if (rect.top < 0) {
          //   that.slideStatus = true
          // }
          if (rect.top > 222) {
            that.slideStatus = false
          } else {
            that.slideStatus = true
          }
        }
      })
      .exec()
  },
  onShow () {

    this.mallId = uni.getStorageSync('mallId') || "0"

    clearTimeout(this.timeId)
    hotWords().then(res => {
      if (res.code === 200) {
        this.hotWordsList = res.data
        this.changeHotWords()
        this.hotWords = res.data[0]
      }
    })
    uni.$on('update', () => {
      this.floorData = []
      this.carouselChart() //获取首页数据
    })
    this.verifyTokenStatus = getApp().verifyTokenStatus()
  },
  async onLoad (e) {
    if (e.invitationCode) {
      this.setBindInviter({ invitationCode: e.invitationCode })
    }
    this.calculateHeight() //计算顶栏高度
    // #ifndef MP
    //更新
    this.versionUpdate()
    // #endif
    await this.$onLaunched
    this.carouselChart()
  }
}
</script>

<style lang="scss" scoped>
.home_container {
  background: #fafafa;
  overflow-y: auto;
}
.bg_0 {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/bg_0.png");
}
.bg_100 {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/bg_100.png");
}
.bg_200 {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/bg_200.png");
}
.top_cont {
  width: 100%;
  height: 250rpx;
  position: fixed;
  top: 0;
  z-index: 10;
  .top_cont_log {
    // #ifdef MP
    width: 70%;
    // #endif
    // #ifndef MP
    width: 100%;
    // #endif

    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo {
      width: 200rpx;
      height: 45.02rpx;
      margin-left: 35rpx;
    }
    ._icon {
      display: flex;
      align-items: center;
    }
    .qt,
    .cs {
      width: 40rpx;
      height: 40rpx;
      margin-right: 28rpx;
    }
    .cs {
      margin-top: 10rpx;
    }
  }
  .search {
    width: calc(100% - 50rpx);
    height: 70rpx;
    background: #fff;
    border-radius: 62rpx;
    margin: 0 25rpx;
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon_search,
    .icon_scanCode {
      width: 30rpx;
      height: 30rpx;
    }
    .icon_search {
      margin-left: 24rpx;
    }
    .icon_scanCode {
      margin-right: 35rpx;
    }
    .search_input {
      width: calc(100% - 160rpx);
      height: 60rpx;
      font-size: 26rpx;
      margin: 0 16rpx;
    }
  }
  .page_list {
    display: flex;
    justify-content: space-between;
    padding: 12rpx 42rpx 0;
    .page_item {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      position: relative;
      img {
        width: 109rpx;
        height: 99rpx;
      }
      text {
        font-size: 24rpx;
        margin-top: 6rpx;
      }
      .active {
        width: 54rpx;
        height: 20rpx;
        position: absolute;
        left: 50%;
        bottom: -25rpx;
        transform: translateX(-50%);
      }
    }
  }
  .page_floor_top {
    height: 28rpx;
    border-radius: 20rpx 20rpx 0 0;
    background: #f4f4f4;
    margin-top: 20rpx;
  }
}
.home_top_bg {
  width: 100%;
  background: #f4f4f4;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.home_banner {
  margin: 0 24rpx 25rpx;
  background: #f4f4f4;
  swiper {
    height: 320rpx;
    swiper-item {
      border-radius: 16rpx;
    }
  }
}
.home_floor {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.home_recommend {
  .home_recommend_title {
    height: 83rpx;
    line-height: 83rpx;
    background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/commodity.png");
    position: sticky;
    padding: 0 20rpx;
    .scroll-view_H {
      width: 100%;
      white-space: nowrap;
      .recommend_default {
        display: inline-block;
        margin-left: 50rpx;
        font-size: 26rpx;
        view {
          display: flex;
          flex-flow: column nowrap;
          align-items: center;
          .after {
            display: block;
            width: 62rpx;
            height: 6rpx;
            background: linear-gradient(
              90deg,
              #2871fc 0%,
              rgba(40, 113, 252, 0) 100%
            );
            border-radius: 5rpx 5rpx 5rpx 5rpx;
            margin-top: -16rpx;
          }
        }
      }
      view:nth-child(1) {
        margin-left: 0;
      }
      .recommend_style {
        font-weight: bold;
        color: #2871fc;
        font-size: 30rpx;
      }
    }
  }
  .home_recommend_list {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 20rpx 20rpx 0;
    background: #f4f4f4;
    .recommend_item {
      width: 350rpx;
      min-height: 426rpx;
      background: #fff;
      border-radius: 24rpx;
      margin-bottom: 20rpx;
      .imgs {
        position: relative;
        .original {
          width: 307rpx;
          height: 214rpx;
          margin: 20rpx 20rpx 10rpx;
          display: inline-block;
        }
      }

      .goods_info {
        margin: 0 25rpx 0 18rpx;
        padding-bottom: 20rpx;
        .goods_name {
          display: flex;
          align-items: center;
          .goodsName {
            font-size: 30rpx;
            line-height: 44rpx;
            color: #333333;
            font-weight: bold;
          }
        }

        .simpleSpecs {
          font-size: 24rpx;
          color: #999999;
          margin: 4rpx 0;
        }
        .activityType {
          color: #ef231b;
          .purchase {
            font-size: 16rpx;
            color: #2871fc;
            background: rgba($color: #2871fc, $alpha: 0.1);
            padding: 4rpx 8rpx;
            border-radius: 4rpx;
            margin: 0 10rpx;
          }
          .pomationType {
            font-size: 16rpx;
            color: #fff;
            background: #ef231b;
            padding: 4rpx 8rpx;
            border-radius: 4rpx;
            margin-right: 10rpx;
          }
          .coupons {
            font-size: 16rpx;
            background: rgba($color: #ef231b, $alpha: 0.1);
            padding: 4rpx 8rpx;
            border-radius: 4rpx;
            margin-right: 10rpx;
          }
        }
        .promotionPrice {
          color: #ef231b;
          margin-top: 6rpx;
          .coinSymbol {
            font-size: 24rpx;
          }
          .price {
            font-size: 32rpx;
            font-weight: bold;
          }
          .packing {
            font-size: 20rpx;
            color: #999999;
          }
        }
        .originalPrice {
          font-size: 20rpx;
          color: #999999;
          text-decoration-line: line-through;
        }
      }
    }
    .notAvailable {
      margin-top: 30%;
      margin-left: 50%;
      transform: translateX(-50%);
      font-size: 30rpx;
      color: #999999;
      text-align: center;
      image {
        width: 300rpx;
        height: 300rpx;
      }
    }
  }
  .recommendTitleStatus {
    height: 10rpx;
  }
}
.nononono {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 34rpx;
}
.advertisement {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  background: rgba($color: #000000, $alpha: 0.2);

  view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    image {
      height: 554rpx;
    }

    .icon {
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 25rpx;
    }
  }
}
</style>
